#{extends 'main.html' /}
#{set title:'Home' /}

<div id="navigation">
#{form @Secure.authenticate()}
	<a href="@{Application.index()}"><img src="@{'/public/images/logo.png'}" alt="logo" class="logo"></a> |
	<span id="username-field">
		<label for="username">Email:</label>
		<input type="text" name="username" id="username" value="${flash.username}" />
	</span>
	<span id="password-field">
		<label for="password">&{'secure.password'}</label>
		<input type="password" name="password" id="password" value="" />
	</span>
	<span id="remember-field">
		<input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} />
		<label for="remember">&{'secure.remember'}</label>
	</span>
	<span id="signin-field">
		<input type="submit" id="signin" value="&{'secure.signin'}" />
	</span>
	#{if flash.error}
		<span class="error">
			&{flash.error}
		</span>
	#{/if}
	#{if flash.success}
		<span class="success">
			&{flash.success}
		</span>
	#{/if}
#{/form}
</div>

<div class="content">	
	<h1>Description</h1>
	<p>Bla bla bla.</p>
	
	<div id="indexContainer">
		<div id="newsContainer">	
			<h1>News</h1>
			#{if news}
				#{list items:news, as:'newsItem'}
					<span>
						${newsItem.postedAt.format('dd-MM-yyyy, hh:ss')}: <b>${newsItem.title}</b><br>
						${newsItem.content} <br>
						--- ${newsItem.postedBy.name}<br>
					</span><br>
				#{/list}
			#{/if}
		</div>
		
		<div id="registrationContainer">	
			<h1>Sign Up</h1>
			#{form @Application.register()}
			<table cellpadding="0" cellspacing="0" border="0">
				<tbody>
					<tr>
						<td><label for="email">Email: </label></td>
						<td><input type="text" name="email" id="email" value="${flash.email}" /><span class="error">#{error 'email' /}</span></td>
					</tr>
					<tr>
						<td><label for="username">Username: </label></td>
						<td><input type="text" name="username" id="username" value="${flash.username}" /><span class="error">#{error 'username' /}</span></td>
					</tr>
					<tr>
						<td><label for="realname">Real name: </label></td>
						<td><input type="text" name="realname" id="realname" value="${flash.realname}" /></td>
					</tr>
					<tr>
						<td><label for="password">Password: </label></td>
						<td><input type="password" name="password" id="password" value="${flash.password}" /><span class="error">#{error 'password' /}</span></td>
					</tr>
					<tr>
						<td><label for="passwordRepeat">Repeat password: </label></td>
						<td><input type="password" name="passwordRepeat" id="passwordRepeat" value="${flash.passwordRepeat}" /><span class="error">#{error 'passwordRepeat' /}</span></td>
					</tr>
				</tbody>
			</table>
				<span>
					<input type="submit" id="register" value="Register" />
				</span>
			#{/form}
			#{if flash.error}
				<p>Please correct the errors</p>
			#{/if}
		</div>
	</div>
</div>